Saltar al contenido principal

AR Clip SDK

Información general​

AR Clip permite ofrecer experiencias AR mediante App Clips: el contenido WebGL se ejecuta en streaming mientras ARKit y el motor VPS de WebAR³ proporcionan localización. Sigue el flujo al estilo Immersal: requisitos, instalación, preparación de la escena, activación del VPS y carga del build WebGL.

Requisitos​

Nota: En el Editor de Unity la mayoría de las API de AR Clip están deshabilitadas mediante Application.isEditor. Genera un build WebGL y pruébalo desde la app móvil de AR Clip para ver el comportamiento real.

Instalar el paquete​

  1. Abre Window → Package Manager.
  2. Pulsa + → Add package from Git URL….
  3. Introduce https://github.com/WebAR-Studio/arclip_sdk.git y confirma.

Antes de importar, elimina cualquier carpeta Assets/ARLib existente para evitar conflictos:

error CS0433: The type 'ARLibTester' exists in both 'ARLib' and 'Assembly-CSharp'

Importar ejemplos​

En Package Manager → AR Clip → Samples:

  • Importa WebGLTemplates y copia la carpeta resultante en Assets/ para poder seleccionarla en Project Settings → Player → WebGL Template.
  • Importa TransparentBackground y mueve TransparentBackground.jslib a Assets/Plugins para habilitar el render transparente en WebGL.

Preparar la escena​

  1. Crea un GameObject vacío ARClipController.
  2. Añade ARLibController y asigna la cámara al campo renderCamera.
  3. Desactiva el componente Camera, establece Clear Flags = Solid Color y usa el color RGBA(0,0,0,0).
  4. Opcionalmente, añade ARLibTester (de los samples) para simular eventos en el editor.

Script mínimo​

using UnityEngine;
using ARLib;

public class ARClipBootstrap : MonoBehaviour
{
    [SerializeField] private Camera renderCamera;

    private void OnEnable()
    {
        ARLibController.Initialized += HandleInitialized;
        ARLibController.VPSPositionUpdated += HandleVpsPose;
    }

    private void OnDisable()
    {
        ARLibController.Initialized -= HandleInitialized;
        ARLibController.VPSPositionUpdated -= HandleVpsPose;
    }

    private void Start()
    {
        ARLibController.SetRenderCamera(renderCamera);
        ARLibController.Initialize();
    }

    private void HandleInitialized()
    {
        ARLibController.EnableCamera();
        ARLibController.EnableAR();
        ARLibController.EnableSurfaceTracking("horizontal");
    }

    private void HandleVpsPose(VPSPoseData pose)
    {
        Debug.Log($"VPS pose: {pose.Position}");
    }
}

Iniciar la localización VPS​

Configura el VPS tras la inicialización y antes de iniciar la localización:

var settings = new VPSSettings
{
    apiKey = "your-api-key",
    locationIds = new[] { "your-location-id" }
};

ARLibController.SetupVPS(settings);
ARLibController.StartVPS();

Escucha los eventos clave:

  • ARLibController.VPSInitialized indica que el subsistema está listo.
  • ARLibController.VPSPositionUpdated devuelve las poses localizadas.
  • ARLibController.OnVPSErrorHappened informa de errores.

Ajusta la cadencia de peticiones con métodos como SetSendPhotoDelay, SetGpsAccuracyBarrier y SetFirstRequestDelay.

Módulos de tracking​

  • Registra imágenes con AddTrackingImage antes de habilitar el tracking. Espera a TrackedImagesArrayUpdate para confirmar la carga.
  • Llama a EnableSurfaceTracking("horizontal" | "vertical" | "both") para detectar planos. Los resultados llegan por SurfaceTrackingUpdated.

Flujo de compilación y carga​

  1. Selecciona la plantilla WebGL: en Project Settings → Player → WebGL → Resolution and Presentation, elige la plantilla copiada.
  2. Genera la compilación: File → Build Settings → WebGL → Build.
  3. Comprime: crea un zip con el contenido del build asegurando que index.html quede en la raíz.
  4. Carga: sube el archivo en https://cdn.mobile.web-ar.studio/clip/pages/zip_uploader.html.
  5. Prueba: escanea el QR generado con la app AR Clip para iOS (https://apps.apple.com/app/ar-clip/id6742754238).

Solución de problemas​

  • Sin feed de cámara: confirma que TransparentBackground.jslib está en Assets/Plugins y que la cámara esté asignada y desactivada.
  • Sin eventos AR en el editor: es el comportamiento esperado; usa ARLibTester o prueba un build WebGL.
  • Errores por tipos duplicados: elimina la carpeta ARLib heredada antes de importar el paquete.